<template>
  <!-- 主体 -->
  <div class="withdraw_auth_content" :style="{ top: `${curTop}vh` }">
    <!-- 标题 -->
    <div class="dialog_title">
      <div class="left"></div>
      <div class="center">验证提币</div>
      <div class="right">
        <img
          @click="curTop = 100"
          src="@/assets/common/close_icon.png"
          alt=""
        />
      </div>
    </div>
    <!-- 内容 -->
    <div class="dialog_content">
      <!-- 提示 -->
      <div class="notice add_text">
        <img src="@/assets/assets/warning_icon.png" alt="" />
        <div>以下信息是否有误</div>
      </div>
      <!-- 验证信息 -->
      <ul class="auth_info">
        <li>
          <span>提币网络</span>
          <span class="add_text">{{ data.mainCoinType.split("/")[1] }}</span>
        </li>
        <li>
          <span>提币地址</span>
          <span class="add_text">{{ data.address }}</span>
        </li>
        <li>
          <span>数量</span>
          <span class="add_text">{{ data.amount }}</span>
        </li>
        <li>
          <span>提币手续费</span>
          <span class="add_text">{{ coinInfo.withdrawalFee * 100 }}%</span>
        </li>
      </ul>
      <!-- 验证表单 -->
      <div class="input_box">
        <div class="input_label">资金密码</div>
        <div class="input">
          <input
            type="text"
            v-model="ruleForm.payPwd"
            placeholder="请输入资金密码"
          />
        </div>
        <div class="input_rule">{{ rules.payPwd.rule }}</div>
      </div>
      <!-- 邮箱验证 -->
      <div class="input_box">
        <div class="input_label">邮箱验证</div>
        <div class="input input_psw">
          <input
            type="text"
            v-model="ruleForm.emailCode"
            placeholder="请输入邮箱验证码"
          />
          <div class="is_open add_text" @click="getCode">
            {{ curTime ? `${curTime}s` : "发送验证码" }}
          </div>
        </div>
        <div class="input_rule">{{ rules.emailCode.rule }}</div>
      </div>
      <!-- 谷歌验证 -->
      <div class="input_box">
        <div class="input_label">谷歌验证</div>
        <div class="input">
          <input
            type="text"
            v-model="ruleForm.googleCode"
            placeholder="请输入谷歌验证码"
          />
        </div>
        <div class="input_rule">{{ rules.googleCode.rule }}</div>
      </div>

      <!-- 确定按钮 -->
      <div class="operate_btn" @click="onConfirm">确定</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withdraw } from "@/api/assets";
import { sendEmail } from "@/api/user";
import { useUserInfo } from "@/stores/userInfo";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

// 获取路由对象
const router = useRouter();
const props = defineProps(["data", "coinInfo"]);
// 倒计时变量
const curTime = ref(0); // 倒计时
const isFlag = ref(true); // 控制频繁发送
// 滑动
const curTop = ref(100);
// 获取用户信息
const user = useUserInfo();
// 表单数据
const ruleForm: any = ref({
  payPwd: "",
  emailCode: "",
  googleCode: "",
  memo: "",
});
// 表单验证
const rules: any = reactive({
  payPwd: {
    msg: "请输入资金密码",
    rule: "",
  },
  emailCode: {
    msg: "请输入邮箱验证码",
    rule: "",
  },
  googleCode: {
    msg: "请输入谷歌验证码",
    rule: "",
  },
});

// 获取验证码
const getCode = () => {
  if (curTime.value) return;
  if (!isFlag.value) return ElMessage.error("请勿频繁请求！");
  isFlag.value = false;

  // 请求邮箱验证码
  sendEmail({ email: user.userInfo.email, useTo: "10" }).then((res: any) => {
    downCount();
    ElMessage.success("获取验证码成功，请注意您的邮箱！");
  });
};

// 显示抽屉
const showDrawer = (top: number) => {
  curTop.value = top;
};

// 确认
const onConfirm = () => {
  if (validateForm()) {
    withdraw({
      ...props.data,
      ...ruleForm.value,
      mainCoinType: props.data.mainCoinType.split("/")[0],
    }).then((res: any) => {
      ElMessage.success("提现成功！");
      router.replace("/assets");
    });
  }
};

// 表单验证
const validateForm = () => {
  for (let k in rules) {
    // 验证是否为空
    if (ruleForm.value[k].trim() == "") {
      rules[k].rule = rules[k].msg;
      return false;
    }
  }
  for (let k in rules) {
    rules[k].rule = "";
  }
  return true;
};

// 验证码倒计时
const downCount = () => {
  let num = 60;
  curTime.value = num;
  let timer = setInterval(() => {
    if (num < 1) {
      clearInterval(timer);
      isFlag.value = true;
    } else {
      num--;
      curTime.value = num;
    }
  }, 1000);
};

defineExpose({
  showDrawer,
});
</script>

<style lang="scss" scoped>
.withdraw_auth_content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 90vh;
  background-color: #202126;
  border-radius: 15px;
  padding: 20px;
  transition: all 0.5s;
  .dialog_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left,
    .right {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .dialog_content {
    margin-top: 10px;
    .notice {
      background-color: #16e65c1a;
      display: flex;
      align-items: center;
      padding: 10px;
      border-radius: 10px;
      div {
        text-align: left;
        margin-left: 10px;
        font-size: 14px;
      }
    }
    .auth_info {
      margin: 30px 0;
      li {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
      }
    }
    .input_box {
      // height: 108px;
      margin-bottom: 10px;
      .input_label {
        margin-bottom: 10px;
      }
      .input {
        width: 100%;
        height: 50px;
        background-color: #384046;
        margin: 5px 0;
        border-radius: 5px;
        input,
        select {
          width: 100%;
          height: 100%;
          font-size: 18px;
          padding: 0 5px;
          background-color: #384046;
          color: #babcbf;
          border-radius: 5px;
        }
      }
      .input_email {
        display: flex;
        input {
          flex: 1;
        }
        span {
          display: flex;
          align-items: center;
          padding: 0 10px;
        }
      }
    }
    .operate_btn {
      margin-top: 50px;
    }
  }
}
</style>
